import { Link } from '@brillout/docpress'

import { UiFrameworkExtension, ImplementedBy, OnlyHtmlNote } from '../../components'

Type: `string | null | ((pageContext) => string | null | undefined)`  
Kind: overridable.  
Environment: server.

<ImplementedBy noCustomGuide />

> See <Link href="/head-tags" /> for a general introduction about `<head>` tags.

The `image` setting sets the [preview image upon URL sharing](https://ahrefs.com/blog/open-graph-meta-tags/#:~:text=8%20simple%20steps.%22%20/%3E-,%3Cmeta%20property%3D%22og%3Aimage%22,-content%3D%22https%3A//ahrefs).

```js
// pages/+config.js

import previewImage from './previewImage.jpg'

export default {
  image: previewImage
}
```

> It adds the following tags to `<head>`:
>
> ```html
> <head>
>   <meta property="og:image" content="/assets/previewImage.9d8ha1.jpg">
>   <meta name="twitter:card" content="summary_large_image">
> </head>
> ```

As shown at:
 - <Link href="/head-tags#page-specific" /> you can override it.
 - <Link href="/head-tags#data" /> you can set it based on fetched data.


## TypeScript

```tsx
// pages/some-page/+image.js
// Environment: server

import type { Data } from './+data'
import type { PageContextServer } from 'vike/types'

export function image(pageContext: PageContextServer<Data>) {
  return pageContext.data.product.image
}
```


## Under the hood

<OnlyHtmlNote />


## See also

- [Ahrefs > Blog > Open Graph Meta Tags: Everything You Need to Know](https://ahrefs.com/blog/open-graph-meta-tags/)
- <Link href="/head-tags" />
- <Link href="/settings#html" doNotInferSectionTitle />
